import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';

const TotalNum = React.lazy(() => import('./TotalNum'));
const AddRedEmp = React.lazy(() => import('./AddRedEmp'));
const ServiceFee = React.lazy(() => import('./ServiceFee'));
const ServiceEmp = React.lazy(() => import('./ServiceEmp'));

@connect(({ analysiscs, loading }) => ({
  analysiscs,
  loadingTotalNum: loading.effects[('analysiscs/fetchCustTotal', 'analysiscs/fetchEmpTotal')],
  loadingServiceEmp: loading.effects['analysiscs/fetchEmpChart'],
  loadingAddRedEmp: loading.effects['analysiscs/fetchAddRedEmpChart'],
  loadingServiceFee: loading.effects['analysiscs/fetchFeeChart'],
}))
class Analysis extends Component {
  state = {};

  componentDidMount() {
    const {
      dispatch,
      analysiscs: { empMonth, feeStartTime, feeEndTime, addRedEmpStartTime, addRedEmpEndTime },
    } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      // 获取客户总量
      dispatch({
        type: 'analysiscs/fetchCustTotal',
        payload: {},
      });
      // 获取服务人数总量
      dispatch({
        type: 'analysiscs/fetchEmpTotal',
        payload: {},
      });
      // 服务人数趋势
      dispatch({
        type: 'analysiscs/fetchEmpChart',
        payload: {
          startTime: moment(empMonth).format('YYYY-MM'),
        },
      });
      // 服务人员排行
      dispatch({
        type: 'analysiscs/fetchEmpOrder',
        payload: {
          startTime: moment(empMonth).format('YYYY-MM'),
        },
      });
      // 获取服务费趋势图
      dispatch({
        type: 'analysiscs/fetchFeeChart',
        payload: {
          startTime: feeStartTime,
          endTime: feeEndTime,
        },
      });
      // 获取自主开发排行
      dispatch({
        type: 'analysiscs/fetchCustFeeOrder',
        payload: {
          startTime: feeStartTime,
          endTime: feeEndTime,
        },
      });
      // 获取增减员趋势图
      dispatch({
        type: 'analysiscs/fetchAddRedEmpChart',
        payload: {
          startTime: addRedEmpStartTime,
          endTime: addRedEmpEndTime,
        },
      });
      // 获取增员排行
      dispatch({
        type: 'analysiscs/fetchAddEmpOrder',
        payload: {
          startTime: addRedEmpStartTime,
          endTime: addRedEmpEndTime,
        },
      });
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
  }

  // 选择月份面板：服务人员

  selectMonthEmp = empMonth => {
    const { dispatch } = this.props;
    dispatch({
      type: 'analysiscs/fetchEmpChart',
      payload: {
        startTime: moment(empMonth).format('YYYY-MM'),
      },
    });
    dispatch({
      type: 'analysiscs/fetchEmpOrder',
      payload: {
        startTime: moment(empMonth).format('YYYY-MM'),
      },
    });
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        empMonth,
      },
    });
  };

  // 选择月份面板：增减员
  handlePanelChange = addRedEmpMonth => {
    const { dispatch } = this.props;
    const startTime = moment(addRedEmpMonth[0]).format('YYYY-MM');
    const endTime = moment(addRedEmpMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        addRedEmpMonth,
        addRedEmpStartTime: startTime,
        addRedEmpEndTime: endTime,
      },
    });
  };

  // 选择月份面板：增减员
  selectMonth = addRedEmpMonth => {
    const {
      dispatch,
      analysiscs: { addRedEmpActiveKey },
    } = this.props;
    const startTime = moment(addRedEmpMonth[0]).format('YYYY-MM');
    const endTime = moment(addRedEmpMonth[1]).format('YYYY-MM');
    // 获取增减员趋势图
    dispatch({
      type: 'analysiscs/fetchAddRedEmpChart',
      payload: {
        startTime,
        endTime,
      },
    });
    if (addRedEmpActiveKey === '1') {
      // 获取增员排行
      dispatch({
        type: 'analysiscs/fetchAddEmpOrder',
        payload: {
          startTime,
          endTime,
        },
      });
    } else {
      // 获取减员排行
      dispatch({
        type: 'analysiscs/fetchRedEmpOrder',
        payload: {
          startTime,
          endTime,
        },
      });
    }
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        addRedEmpMonth,
        addRedEmpStartTime: startTime,
        addRedEmpEndTime: endTime,
      },
    });
  };

  // 切换增减员排行榜
  changeAddRedEmpTabPane = activeKey => {
    const {
      dispatch,
      analysiscs: { addRedEmpStartTime, addRedEmpEndTime },
    } = this.props;
    if (activeKey === '1') {
      // 获取增员排行
      dispatch({
        type: 'analysiscs/fetchAddEmpOrder',
        payload: {
          startTime: addRedEmpStartTime,
          endTime: addRedEmpEndTime,
        },
      });
    } else {
      // 获取减员排行
      dispatch({
        type: 'analysiscs/fetchRedEmpOrder',
        payload: {
          startTime: addRedEmpStartTime,
          endTime: addRedEmpEndTime,
        },
      });
    }
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        addRedEmpActiveKey: activeKey,
      },
    });
  };

  // 选择月份面板：服务费
  handleFeePanelChange = feeMonth => {
    const { dispatch } = this.props;
    const startTime = moment(feeMonth[0]).format('YYYY-MM');
    const endTime = moment(feeMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        feeMonth,
        feeStartTime: startTime,
        feeEndTime: endTime,
      },
    });
  };

  // 选择月份面板：服务费
  selectFeeMonthFee = feeMonth => {
    const {
      dispatch,
      analysiscs: { feeActiveKey },
    } = this.props;
    const startTime = moment(feeMonth[0]).format('YYYY-MM');
    const endTime = moment(feeMonth[1]).format('YYYY-MM');
    // 获取服务费趋势图
    dispatch({
      type: 'analysiscs/fetchFeeChart',
      payload: {
        startTime,
        endTime,
      },
    });
    if (feeActiveKey === '1') {
      // 获取自主开发排行
      dispatch({
        type: 'analysiscs/fetchCustFeeOrder',
        payload: {
          startTime,
          endTime,
        },
      });
    } else {
      // 获取线下委托排行
      dispatch({
        type: 'analysiscs/fetchSuppFeeOrder',
        payload: {
          startTime,
          endTime,
        },
      });
    }
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        feeMonth,
        feeStartTime: startTime,
        feeEndTime: endTime,
      },
    });
  };

  // 切换服务费排行榜
  changeFeeTabPane = activeKey => {
    const {
      dispatch,
      analysiscs: { feeStartTime, feeEndTime },
    } = this.props;
    if (activeKey === '1') {
      // 获取自主开发排行
      dispatch({
        type: 'analysiscs/fetchCustFeeOrder',
        payload: {
          startTime: feeStartTime,
          endTime: feeEndTime,
        },
      });
    } else {
      // 获取线下委托排行
      dispatch({
        type: 'analysiscs/fetchSuppFeeOrder',
        payload: {
          startTime: feeStartTime,
          endTime: feeEndTime,
        },
      });
    }
    dispatch({
      type: 'analysiscs/updateModelData',
      payload: {
        feeActiveKey: activeKey,
      },
    });
  };

  render() {
    const {
      analysiscs: {
        custNum,
        empNum,
        empMonth,
        empData,
        empOrderData,
        feeActiveKey,
        feeData = [],
        feeMonth = [],
        custFeeData = [],
        suppFeeData = [],
        addRedEmpActiveKey,
        addRedEmpData = [],
        addRedEmpMonth = [],
        addEmpData = [],
        redEmpData = [],
      },
      loadingTotalNum,
      loadingServiceEmp,
      loadingServiceFee,
      loadingAddRedEmp,
    } = this.props;
    return (
      <PageHeaderWrapper>
        <GridContent>
          <Suspense fallback={<PageLoading />}>
            <TotalNum loading={loadingTotalNum} custNum={custNum} empNum={empNum} />
          </Suspense>
          <Suspense fallback={null}>
            <ServiceEmp
              loading={loadingServiceEmp}
              empMonth={empMonth}
              empData={empData}
              selectMonth={this.selectMonthEmp}
              empOrderData={empOrderData}
            />
          </Suspense>
          <Suspense fallback={null}>
            <AddRedEmp
              loading={loadingAddRedEmp}
              addRedEmpMonth={addRedEmpMonth}
              addRedEmpData={addRedEmpData}
              addRedEmpActiveKey={addRedEmpActiveKey}
              handlePanelChange={this.handlePanelChange}
              selectMonth={this.selectMonth}
              changeAddRedEmpTabPane={this.changeAddRedEmpTabPane}
              addEmpData={addEmpData}
              redEmpData={redEmpData}
            />
          </Suspense>
          <Suspense fallback={null}>
            <ServiceFee
              loading={loadingServiceFee}
              feeMonth={feeMonth}
              feeData={feeData}
              feeActiveKey={feeActiveKey}
              handlePanelChange={this.handleFeePanelChange}
              selectMonth={this.selectFeeMonthFee}
              changeFeeTabPane={this.changeFeeTabPane}
              custFeeData={custFeeData}
              suppFeeData={suppFeeData}
            />
          </Suspense>
        </GridContent>
      </PageHeaderWrapper>
    );
  }
}

export default Analysis;
